<template>
  <div class="home">
    <v-touch v-on:swipeup="hide" class="touchdown" v-on:swipedown="show">
      <transition name="up">
        <MessageTopBar class="MsT" v-if="showMask"></MessageTopBar>
      </transition>
    <Message></Message>
    </v-touch>
  </div>
</template>

<script>
import MessageTopBar from "@/components/message/MessageTopBar";
import Message from "@/components/message/Message";

export default {
  data(){
    return{
      showMask:true,
    }
  },
  components: {
    MessageTopBar,
    Message
  },
  methods:{
    hide(){
      this.showMask=false
    },
    show(){
      this.showMask=true
    }
  }
}
</script>

<style scoped>
.home .touchdown{
  touch-action: pan-y !important;
}

.up-enter-active,.up-leave-active{
  transition: all .5s;
}
.up-enter,.up-leave-to{
  opacity: 1;
  transform: translateY(-100%);
}
</style>